/*
  学习目标：完成新增功能
    1. 受控组件改造
    2. dispatch触发新增
   
  步骤：
     1. 
     2. 
     3. 
*/
import React from "react";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { addAction } from "../store/action/todo";

export default function Header() {
  const [task, setTask] = useState("");

  const dispatch = useDispatch();
  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      // 2.2 dispatch触发action
      const action = addAction(task);
      dispatch(action);
    }
  };

  return (
    <header className="header">
      <h1>todos</h1>
      <input
        value={task}
        onChange={(e) => setTask(e.target.value)}
        onKeyDown={handleKeyDown}
        className="new-todo"
        placeholder="需要做什么"
        autoFocus
      />
    </header>
  );
}
